﻿/* for pc web console green skin */
:root {
    --bg-color:transparent;
    --bg-color-header:transparent;
    --bg-color-label:transparent;  
    --font-color:#555;

    --bg-color-container-disabled:transparent

   
    --bg-color-template-header:#dcdcdc;
    --font-color-template-header:#b20000;
 
    --bg-color-button:rgba(35, 94, 1, 0.75); 
    --bg-color-button-hover:rgba(57, 135, 13, 0.9);

    --bg-color-fieldset:transparent;
    --bg-color-foot: #e3e3e3;
    /*多选控件下拉框*/
    --bg-color-box:rgba(230, 230, 230, 0.95);
    --bg-color-box-item-hover:#96CBFE;

    --bg-color-dialog:#fefefe;
    --bg-color-dialog-header:#252a42d6;
    --bg-color-chart:whitesmoke;
    --bg-color-image-viewer:rgba(0, 0, 0, 0.6);
    --bg-color-image-viewer-header:rgba(0, 0, 0, 0.0);

    --bg-color-waiting:rgba(111, 211, 41, 0.8);
    --bg-color-loading:rgba(50, 239, 62, 0.6);
    --bg-color-popup-bar:#00AA00 ;

    /*menu*/
    --bg-color-menu: rgba(217, 217, 217, 0.7);
    --bg-color-menu-hover:rgba(156, 156, 156, 0.5);
    --font-color-menu: rgba(5, 6, 11, 0.8);
    --font-color-menu-hover:rgba(5, 6, 11, 0.9);
    /*calendar*/

    /*tree*/
    --bg-color-tree-level-0:dimgrey;
    --bg-color-tree-level-1:rgba(128, 128, 128, 0.6);
    --bg-color-tree-level-2:rgba(169, 169, 169, 0.6);
    --bg-color-tree-level-3:rgba(211, 211, 211, 0.7);
    --bg-color-tree-level-4:rgba(220, 220, 220, 0.7);
    --bg-color-tree-level-5: ghostwhite;
    --bg-color-tree-node-selected:#c0d2ec;
    --border-color-tree-level-0:darkgrey;
    --border-color-tree-level-1:dimgrey;
    --border-color-tree-level-2:grey;
    --border-color-tree-level-3:darkgrey;
    --border-color-tree-level-4:darkgrey;
    --border-color-tree-level-5:darkgrey;
    --font-color-tree-level-0:inherit;
    --font-color-tree-level-1:inherit;
    --font-color-tree-level-2:inherit;
    --font-color-tree-level-3:inherit;
    --font-color-tree-level-4:inherit;
    --font-color-tree-level-5:inherit;

    /*table*/
    --bg-color-table-caption:#C2C2C2;
    --bg-color-tr: #FFFFFF;
    --bg-color-tr-alt: #EFEFEF;
    --bg-color-tr-hover: #9def8f;
    --bg-color-tr-selected: yellow;
    --bg-color-tr-edit:rgba(205, 255, 245, 0.7);
    --bg-color-tfoot: #e3e3e3 ;
    --font-color-table-sort-link-current:red;
    --font-color-table-sort-link-hover:blue;
}

::-webkit-scrollbar-track-piece {
    background-color: #CCC;
    -webkit-border-radius: 10;
}

::-webkit-scrollbar {
    width: 16px; 
}

::-webkit-scrollbar-thumb {
    width: 16px;
    background-color: #969696;
    border: solid 0px  #CCC;
    border-radius: 10px;
    border-left-width:1px;
    border-right-width:1px;
}

::-webkit-scrollbar-thumb:hover {
    width: 16px;
    background-color: #7d7d7d;
    border: solid 0px  #CCC;
    border-radius: 10px;
    border-left-width:1px;
    border-right-width:1px;
}

::-webkit-scrollbar-arrow {
    color: #F00;
    backgound: #0F0;
}

@-moz-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}
}
@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}
}
html{
    scroll-behavior: smooth;
    min-height: 100%;
}
body {
    font-family: '微软雅黑';
    font-size: 14px; /* 默认字体大小 */
    position: relative;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block !important;
    margin: 0 !important;
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: Arial, Helvetica, sans-serif;

}
 
@media (max-width: 600px) {
  body {
    font-size: 12px; /* 在屏幕宽度小于600px时，字体大小调整为14px */
  }
}

th,tfoot>tr,tfoot>td {
    font-family: '微软雅黑';
    border-color: #c5c5c5;
    background-color: var(--bg-color-tfoot) !important;
    color: #2e2e2e !important;;
}
th,td
{
    padding: 0 5px 0 5px;
}
button
{
    border-color: var(--bg-color-button) ;
    background-color: var(--bg-color-button) !important;
    box-shadow: #141416a6 2px 4px 3px;
}
button:hover{
    cursor: pointer;
    border-color: var(--bg-color-button-hover) ;
    background-color: var(--bg-color-button-hover) !important;
    box-shadow:#141416a6 0px 3px 2px;
}

input[type='button'] {
    border-color: var(--bg-color-button) ;
    border: 1px solid gray;
    color: #000 ;
    font-family: '微软雅黑';
    width:75px;
    box-shadow: 2px 2px 2px 2px slategray;
}

input[type='button']:hover {
    cursor: pointer;
    background-color: var(--bg-color-button-hover);
    border: 1px solid rgba(35, 35, 35, 0.75);
    box-shadow: 1px 1px 0px 0px rgba(35, 35, 35, 0.5);
}
input[type='checkbox'] {
    -moz-transform: scale(1.2);/*火狐浏览器*/
    -ms-transform: scale(1.2);/* IE浏览器*/
    -webkit-transform: scale(1.2); /*chrome和safair*/
    -o-transform: scale(1.2);

}
input[type='radio'] {
    -moz-transform: scale(1.2);/*火狐浏览器*/
    -ms-transform: scale(1.2);/* IE浏览器*/
    -webkit-transform: scale(1.2); /*chrome和safair*/
    -o-transform: scale(1.2);

}
input,textarea { 
    box-sizing: border-box; 
    border: 1px solid gray;
    background-color: #ffffff;
}

input[type='text']:focus, textarea:focus
{
    background: rgb(255, 255, 255) ;
    border: 1px solid #6FA1D9 ;
    -webkit-box-shadow:0px 0px 5px #6FA1D9;
}

input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus
{
    border: 1px solid rgba(35, 35, 35, 0.9);
}

input[type="checkbox"]:focus, input[type="radio"]:focus
{
    
    background-color: var(--bg-color-button);
    -webkit-box-shadow:none;
    /*outline: 1px solid #6FA1D9 !important;*/
}


input[disabled]{
      background: rgba(168, 168, 168, 0.6)  !important;
      border: 0px solid #DDD;
      color: #807c6c !important;
  }

input[disabled]:hover
{
    background: rgba(168, 168, 168, 0.6) !important;
    border: 0px solid rgba(35, 35, 35, 0.75);
}


select {
    border: 1px solid gray;
    background-color: #ffffff !important;
}

div {
    font-family: '微软雅黑'; 
    box-sizing: border-box; 
}
iframe{
    border-width:0px; 
    box-sizing: border-box; 
}

fieldset { 
    box-sizing: border-box; 
    border: 1px solid #ccc;
    padding: 0 !important;
    margin: 0 0 0 0;
    background-color: var(--bg-color-fieldset);
}
legend {
    margin-left: 40px;
    line-height: 45px;
    font-weight:800;
    font-size: 120%;
    color: rgba(0, 0, 0, 0.6);
}
.x-no-print{
}
.x-not-print{
}
.x-not-print-border{
}

@media print {

    /*
    不打印 不占位
    */
    .x-no-print{
        /*display: none;*/

    }
    /*不打印 占位 */
    .x-not-print{
        visibility: hidden;
    }
}

.x-componentx-dom {
   /* color: #000000;*/
    border: none !important;
    padding: 0px !important;
    overflow: visible;
    float: left;
    background-color: inherit;
    background: transparent;
    resize: none;
    -webkit-user-select: text;  /*Chrome all / Safari all  */
    -moz-user-select: text;  /*Firefox all */
    -ms-user-select: text;  /*IE 10+  */
     /*No support for these yet, use at own risk  */
    -o-user-select: text;
    user-select: text;
    /* position: relative;生成相对定位的元素，相对于其正常位置进行定位 */
    cursor: inherit;
    background-color: transparent;
    /*border: 1px solid yellow;*/
}
.x-componentx-fixed{
    position: fixed !important;
}
.x-componentx-floating {
    position: absolute ;
    opacity: 0.97;
    filter: dropshadow(color=#666666, offx=3, offy=3, positive=2);
}

.x-componentx-hover{
    overflow: hidden;
}
.x-componentx-hover .x-body,.x-componentx-hover .x-ctrl{
    z-index: 99999;
}
.x-componentx-hover:hover{
    cursor: pointer;
    overflow: visible;
}

.x-componentx-top  {
    display: flex !important;
    flex-direction: column;
    flex-wrap:nowrap;
}

.x-componentx-right  {
    display: flex !important;
    flex-direction: row-reverse;
    flex-wrap:nowrap;
    align-items: center;
}

.x-componentx-bottom {
    display: flex !important;
    flex-direction: column-reverse;
    flex-wrap:nowrap;
}

.x-componentx-left  {
    display: flex !important;
    flex-direction: row;
    flex-wrap:nowrap;
    align-items: center;
}
/*
   container 组件 layout 布局 样式
*/

.x-componentx-dom .x-header  { 
    display: inline-block;
    background-color: var(--bg-color-header);
   /* overflow: hidden;*/
}

.x-componentx-dom .x-body {
    overflow: auto;
    margin: 0px;
}
.x-layout-hbox
{
    display: -webkit-flex;
    display: flex;  
    flex-direction: row; 
}
/*
 水平布局(flex) 顶部对齐，即：center top
*/
.x-layout-hbox-top { 
    -webkit-align-content: start;
    justify-content: center;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/ 
    align-content: start;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items: center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 水平布局(flex) 靠右对齐，即：right center
*/
.x-layout-hbox-right {  
    -webkit-align-content: center;
    justify-content: end;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/ 
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items: center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 水平布局(flex) 底部对齐，即：center bottom 对齐
*/
.x-layout-hbox-bottom {  
    -webkit-align-content: end;
    align-content: end;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    justify-content: center;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/ 
    align-items: center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 水平布局(flex) 左侧对齐，即：left top 对齐
*/
.x-layout-hbox-left {  
    -webkit-align-content: center;
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    justify-content: start;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/  
    align-items: center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 水平布局(flex) 中心对齐，即：center center 对齐
*/
.x-layout-hbox-center { 
    -webkit-align-content: center;
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    justify-content: center;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/ 
    align-items: center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}

.x-layout-vbox
{
     display: -webkit-flex;
    display: flex; 
    flex-direction: column; 
}
/*
 垂直布局(flex) 顶部对齐，即：left top 对齐
*/
.x-layout-vbox-top {
   
    justify-content: start;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/ 
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items: center; /*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 垂直布局(flex) 靠右对齐，即：right center 对齐
*/
.x-layout-vbox-right { 
    justify-content: center;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/  
    align-content: end;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items:center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
   
}
/*
 垂直布局(flex) 底部对齐，即：center bottom 对齐
*/
.x-layout-vbox-bottom { 
    justify-content: end;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/  
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items:center;/*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
   
}
/*
 垂直布局(flex) 靠左对齐，即：left center 对齐
*/
.x-layout-vbox-left { 
    justify-content: start;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/  
    align-content: start;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items:center; /*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}
/*
 垂直布局(flex) 中心对齐，即：center center 对齐
*/
.x-layout-vbox-center { 
    justify-content: center;/*整体主轴对齐方式: flex-direction:row时 ，水平向对齐方式；flex-direction:column时，垂直方向对齐方式；*/  
    align-content: center;/*整体交叉主轴对齐方式 : flex-direction:row时，垂直方向对齐方式；flex-direction:column时，水平向对齐方式；*/
    align-items:center; /*主轴方向每行或列元素(元素高度/宽度可能不一致) 主轴方向 子元素对齐方式*/
}

.x-layout-flex-wrap{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.x-layout-flex-nowrap{
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/*align-content*/
.x-layout-flex-align-content-start{
    align-content: start;
}
.x-layout-flex-align-content-center{
    align-content: center;
}
.x-layout-flex-align-content-end{
   align-content: end;
}
.x-layout-flex-align-content-space-between{
   align-content: space-between;
}
.x-layout-flex-align-content-space-around{
   align-content: space-around;
}
.x-layout-flex-align-content-space-evenly{
   align-content: space-evenly;
}
.x-layout-flex-align-content-stretch{
   align-content: stretch;
}
/*justify-content*/
.x-layout-flex-justify-content-start{
    justify-content: start;
}
.x-layout-flex-justify-content-center{
    justify-content: center;
}
.x-layout-flex-justify-content-end{
   justify-content: end;
}
.x-layout-flex-justify-content-space-between{
   justify-content: space-between;
}
.x-layout-flex-justify-content-space-around{
   justify-content: space-around;
}
.x-layout-flex-justify-content-space-evenly{
   justify-content: space-evenly;
}
.x-layout-flex-justify-content-stretch{
   justify-content: stretch;
}
/*align-items*/
.x-layout-flex-align-items-start{
    align-items: start;
}
.x-layout-flex-align-items-center{
    align-items: center;
}
.x-layout-flex-align-items-end{
   align-items: end;
}
.x-layout-flex-align-items-stretch{
   align-items: stretch;
}

.x-layout-fit{
    display: flex;
}
/*
 自适应布局顶部对齐
*/
.x-layout-fit-top { 
    width: 100%;
    height: 100%;
}
.x-layout-fit-right { 
    width: 100%;
    height: 100%;
}
.x-layout-fit-bottom { 
    width: 100%;
    height: 100%;
}

.x-layout-fit-left { 
    width: 100%;
    height: 100%;
}

.x-layout-fit-center { 
    width: 100%;
    height: 100%;
}
 
/*
 边框布局 顶部对齐
*/
.x-layout-border {
    /*text-align: right;*/
    position: relative;
}
.x-layout-border-north {
    /*text-align: right;*/
    position: absolute;
}

.x-layout-border-west {
    text-align: right;
    position: absolute;
}

.x-layout-border-east {
    text-align: left;
    position: absolute;
}
/*

*/
.x-layout-border-south {
    text-align: left;
    position: absolute;
}
/*
*/
.x-layout-border-center {
    text-align: left; 
    position: absolute;
}
/*
 自动应布局(display: block) 顶部对齐
*/
.x-layout-auto-top {
    display: block; 
    /*没有对象方式*/
}
.x-layout-auto-right {
    display: block; 
    /*没有对象方式*/
}
.x-layout-auto-bottom {
    display: block; 
    /*没有对象方式*/
}

.x-layout-auto-left {
    display: block; 
    /*没有对象方式*/
}
/*
 自动应布局(display: gird) 顶部对齐
*/
.x-layout-grid-top {
    display: grid;
    justify-items: stretch;/*display:grid 时有效*/
    align-items: start;
    align-content: space-between;
}
.x-layout-grid-right {
    display: grid;
    justify-items: stretch;/*display:grid 时有效*/
    align-items: start;
    align-content: space-between;
}
.x-layout-grid-bottom {
    display: grid;
    justify-items: stretch;/*display:grid 时有效*/
    align-items: start;
    align-content: space-between;
}

.x-layout-grid-left {
    display: grid;
    justify-items: stretch;/*display:grid 时有效*/
    align-items: start;
    align-content: space-between;
}
/*
控件不可用
*/
.x-container-disabled {
    pointer-events: none !important;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    background: var(--bg-color-container-disabled) !important;
}
.x-container-disabled div,.x-container-disabled svg,.x-container-disabled input,.x-container-disabled button{
    pointer-events: none !important;
}

.x-dialog {
    position: absolute;
    /*color: #fff;*/
    filter: Alpha(opacity=70);
    background-color: var( --bg-color-dialog) !important;
    font-size: 100%;
    cursor: default;
    border: 1px solid #fff;
    border-radius: 6px;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .4);
}

.x-dialog .x-d-header {
    overflow: hidden;
    cursor: move !important;
    background-color:var( --bg-color-dialog-header) !important;    /*transparent !important;*/
    border-bottom: 1px solid red;
    -webkit-user-select: none;  /*Chrome all / Safari all  */
    -moz-user-select: none;  /*Firefox all */
    -ms-user-select: none;  /*IE 10+  */
    /*No support for these yet, use at own risk  */
    -o-user-select: none;
    user-select: none;

}

.x-dialog .x-d-header .x-f-title {
    /*background-color: inherit;*/
    font-weight: normal;
    font-size: 120%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    line-height: inherit;
    height: 100%;
    text-align: center;
    color: #fff;
    pointer-events:none;

}

.x-dialog .x-d-header .x-f-close {
    cursor: default !important;
    width: 30px !important;
    margin: 0 10px !important;
    flex: unset !important;
}

.x-dialog .x-d-body
{
     overflow: auto;
}

.x-footer
{
    background-color: var( --bg-color-foot);
}
.x-chart
{
    background-color: var(--bg-color-chart);
}

.x-chart .x-header{
    font-size: 120%;
}

/*
*/
.x-page-container{
    background-color: transparent;
    overflow: auto;
}
.x-page-container .x-c-body{
    background-color: inherit;
    overflow: auto;
}
/*
*/
.x-tab {
    float: left;
    text-indent:0px;
    /*border: 1px solid brown;*/
    text-align: center;

}

.x-tab-header {
    /*background-color:  #e3e3e3;*/
    height: 40px ;
    /*pointer-events: none;*/
}
/*
*/
.x-tab-body {
    position: relative;
    display: block;
    background-color: inherit;
    width: auto !important;
    overflow: auto;
    /*border-color: #1B9DD4;*/
}

/*
*/
.x-tab-selected {
    top:1px;
    z-index: 10;
    border: 1px solid transparent;
}
/*
*/
.x-tab .x-image {
    top: 2px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    cursor: pointer;
}
/*
*/
.x-tab .x-title {
    position: absolute;
    top: 12px;
    right: 30px;
    bottom: 10px;
    left: 30px;
    color: #545454;
    background-color: inherit;
    font-size: 120%;
    /*font-weight: bold;*/
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    z-index: 12;
    text-overflow: ellipsis;
}

.x-componentx-dom .x-label { 
    cursor: inherit; 
}

.x-componentx-dom .x-ctrl {
   /* background: inherit;*/
    padding: 0px 0px 0px 0px;
    outline: none;
    font-size: inherit; 
}

.x-control-error
{
    border: 1px rgba(252, 0, 0, 0.7) solid !important;
}

.x-control-disabled
{
    pointer-events: none;
    color: grey;
}

.x-control-border {
    border: 1px solid #7ccc6f;
}

.x-control-disabled {
    pointer-events: none;
    filter: Alpha(opacity=70);
    /*background:rgba(214, 214, 214, 0.8) !important;*/
    color: #CCC !important;
}

.x-control-button {
    color: #FFF;
    height: 35px;
    border-radius: 5px;
    outline: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.x-text-button
{
    display: inline-block;
    font-weight: 400;
    margin-bottom: 4px;
    color: #fff  !important;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    width: auto !important;
    padding: .2rem .75rem;
    font-size: 1rem;
    line-height: 2;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #007bff !important;
    border-color: #007bff  !important;
}
.x-text-label
{
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.4;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #1498ff;
    border-radius: 3px;
    margin: 1px 2px;
}
.x-text-link
{
    color: #000000;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .2rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
}
.x-control-hidden
{
    display: none;
}
 
.x-slider { 
    background: #fcfcfc;
    border-radius: 20px; 
    align-items: center; 
  }
      
.x-slider input[type="range"] {
    -webkit-appearance: none !important;
    width: 420px;
    height: 2px;
    background: black;
    border: none;
    outline: none;
  }
   
.x-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 30px;
    height: 30px;
    background: black;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}
.x-slider input[type="range"]::-webkit-slider-thumb:hover {
    background: black;
  }
  

.x-control-checkbox {
    visibility: hidden;
}
.x-control-checkbox input[type='checkbox']{
    visibility: hidden;
    position: absolute;
}
.x-control-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -1px 1px -1px rgba(0,0,0,0.05);*/ 
    border-radius: 3px;
    display: inline-block;
}

.x-control-checkbox + label:active, .x-control-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.x-control-checkbox:checked + label {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
    /*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -1px 1px -1px rgba(0,0,0,0.05), inset 1px 1px -1px rgba(255,255,255,0.1);*/
    color: #99a1a7;
}

.x-control-checkbox:checked + label:after {
   content: '\2713';
   font-size: 16px; 
   color: #4f575d;
   min-height: 24px;
   min-width: 24px;
   height: 100%;
   width: 100%;
   text-align: center;
   position: absolute;
   top:0px; 
   left: 0px;
}


.x-control-radio {
   visibility: hidden;
}
.x-control-checkbox input[type='radio']{
   visibility: hidden;
}
.x-control-radio + label {
   -webkit-appearance: none;
   background-color: #fafafa;
   border: 1px solid #cacece;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
   padding: 9px;
   border-radius: 50px;
   display: inline-block;
   position: relative;
}

.x-control-radio:checked + label:after {
   content: ' ';
   width: 12px;
   height: 12px;
   border-radius: 50px;
   position: absolute;
   top: 3px;
   background: #99a1a7;
   box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
   text-shadow: 0px;
   left: 3px;
   font-size: 32px;
}

.x-control-radio:checked + label {
   background-color: #e9ecee;
   color: #99a1a7;
   border: 1px solid #adb8c0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.x-control-radio + label:active, .x-control-radio:checked + label:active {
   box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}


.x-control-text, .x-control-textarea, .x-control-password ,.x-control-combobox,.x-control-number{
   border: 1px solid gray !important;
   background-color: #FFF !important;
}


.x-control-label{

}
.x-control-label .x-ctrl
{
   /*border-bottom: 1px rgba(43, 125, 255, 0.38) solid;*/
}

.x-control-autocomplete,.x-control-mulitiselect
 {

 }

.x-control-autocomplete .x-box,.x-control-mulitiselect .x-box
{
    border:1px solid #000000;
    position:fixed;
    background-color: var(--bg-color-box);
    z-index: 99999;
}

.x-control-autocomplete .x-box:focus,.x-control-mulitiselect .x-box:focus
{
    outline:none
}

.x-control-autocomplete .x-box li,.x-control-mulitiselect .x-box li
{
    list-style-type: none;
}
.x-control-autocomplete .x-box li:hover,.x-control-mulitiselect .x-box li:hover
{
    background-color: var(--bg-color-box-item-hover);
    cursor:pointer;
}

.x-control-carousel
{

}
.x-control-carousel img
{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.x-control-carousel .x-label
{

}
.x-control-carousel .x-ctrl
{
    text-align: center;
}
.x-control-image {
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative; 
}
.x-control-image-none-bg
{
    background-image:none !important;
}
.x-control-image .x-border{
    outline: rgba(0, 0, 0, 0.7) 1px dotted !important;
    position: absolute;
    top:2px;
    right: 2px;
    bottom: 2px;
    left:2px;
}

.x-control-image img{
    max-width: 100%;
    max-height: 100%;

    /* display: block;
    position: absolute; */
    /* top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    vertical-align: middle; */


}
.x-control-image img:hover {
 
}
.x-control-image .x-close{
    position: absolute;
    right: 2px;
    top:1px;
    z-index: 1000;
    color: red;
    background-color: rgba(70, 70, 70, 0.4) ;
    font-size: 85%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    line-height: 15px;
    text-align: center;

}

.x-control-image .x-close:hover{
    font-size: 110%;
    line-height: 16px;
}
.x-control-image .x-add
{
    cursor: pointer;
    outline: rgba(0, 0, 0, 0.5) 1px dotted !important;
    position: absolute;
    top:2px;
    right: 2px;
    bottom: 2px;
    left:2px;
    /* height: 100%; */
    /* width: 100%; */ 
    z-index: 2000;
    opacity: 1;
    background-color: whitesmoke;
    background-image: url('../images/default/upload.png');
    /* background-size:30% 30% !important; */
    /* -moz-background-size:30% 30% !important; */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-origin: padding-box !important;
}
 
.x-viewer-image-viewer{

    background-color: var(--bg-color-image-viewer) !important;
    border: rgba(231, 231, 231, 0.7) 1px dotted !important;
    box-shadow: rgba(98, 98, 98, 0.54) 8px 8px 8px 0px !important;

}
.x-viewer-image-viewer .x-header{
    background-color: var(--bg-color-image-viewer-header) !important;
    text-align: center;
    line-height: 40px;
}
.x-viewer-image-viewer .x-previous {
    position: absolute;
    left: 0px;
    width: 40px;
    color: white;
    font-size: 150%;
    font-weight: bold;
    cursor: pointer;
}

.x-viewer-image-viewer .x-previous:hover{
    color: blue;
}
.x-viewer-image-viewer .x-next {
    position: absolute;
    right: 0px;
    width: 40px;
    color: white;
    font-size: 150%;
    font-weight: bold;
    cursor: pointer;
}
.x-viewer-image-viewer .x-next:hover {
    color: blue;
}
.x-viewer-image-viewer .x-title
{
    position: absolute;
    right: 40px;
    left: 40px;
    text-align: center;
    color: white;
}
.x-viewer-image-viewer .x-body
{
    inset-block-end:30px !important;
}
.x-viewer-image-viewer .x-footer
{
    background-color: rgba(0, 0, 0, 0.0);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
    z-index: 99999;
}
.x-viewer-image-viewer img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    border: rgba(0, 0, 0, 0.26) 1px solid;
    background-color: rgba(231, 231, 231, 0.9);
    border: rgba(231, 231, 231, 0.7) 1px dotted;
    box-shadow: rgba(98, 98, 98, 0.6) 8px 8px 8px 0px;
}

.x-print-area{

}
.x-print-area table
{
    padding: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    height: auto !important;
    border-collapse: collapse;
    letter-spacing: 2px;
    display: table;
    -webkit-border-horizontal-spacing: 2px;
    -webkit-border-vertical-spacing: 2px;
    border-top-color: #eff3f6;
    border-right-color: #eff3f6;
    border-bottom-color: #eff3f6;
    border-left-color: #eff3f6;
    cellspacing:0px;
}

.x-print-area table td {

    font-size: 100%;
    text-align: center;
    background: inherit;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid black;
    /*color: #5F5E5A;*/
}

@media print {

    .x-print-area{

    }
    /*
    不打印 不占位
    */
    .x-no-print{
        display: none;
    }
    /*
    不打印 占位
    */
    .x-not-print{
        visibility: hidden;
    }
    .x-print-area .x-not-print-border
    {
        border: 0px solid black !important;
    }

    .x-print-area .x-not-print-border td {

         border: 0px solid black;
    }
}
.x-table
{

}
.x-table table
{ 
    padding: 0;
    /* position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px; */
    width: 100%;
    height: auto !important;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid var(--bg-color-table-caption);
    letter-spacing: 2px;
}
.x-table table img{
    vertical-align: middle;
}
.x-table table caption {
    background-color: var(--bg-color-table-caption);
    width: 100%;
    text-align: left;
    vertical-align: bottom;
}

.x-table table thead {
    vertical: middle;
    background-color:var(--bg-color-table-caption);
}
.x-table table tbody {
    position: relative;
    width: 100%;
    border: 0px solid var(--bg-color-table-caption);
    border-spacing: 0px;
    vertical-align: middle;
}

.x-table table tfoot {
    vertical-align: middle;
    position: relative;
    width: 100%;
    bottom: 0px;
    border: 0px solid inherit;
}

.x-table table thead th {
    height: 40px;
    line-height: 28px;
    font-weight: bold;
    font-size: 100%;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid var(--bg-color-table-caption);
}
.x-table table thead .x-design
{
    word-break: keep-all;
    white-space: nowrap;
    padding: 0 30px 0 5px;
}
.x-table table thead th .x-sort-link{
    width: 30px;
    text-align: center;

}
.x-table table thead th .x-sort-link-current{
    color: var(--font-color-table-sort-link-current);
}
.x-table table thead th .x-sort-link:hover{
    cursor: pointer;
    color: var(--font-color-table-sort-link-hover);
}
.x-table table thead th.parent{
    height: 20px;
    line-height: 20px; 
}
.x-table table thead th.sub {
    height: 20px;
    line-height: 20px;
    font-size: 90%;
    font-weight: normal;
}

.x-table tbody tr {
    height: 28px !important;
    line-height: 28px;
    background-color: var(--bg-color-tr);
}

.x-table tbody tr.alt {
    background-color: var(--bg-color-tr-alt);
}

.x-table tbody tr:hover {
    background-color: var(--bg-color-tr-hover);
    /*font-weight: bold;*/
}

.x-table table tbody td {
    height: 38px !important;
    font-size: 100%;
    text-align: center;
    background: inherit;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid var(--bg-color-table-caption);
    overflow:hidden;
    text-overflow: ellipsis;
    /*color: #5F5E5A;*/
}
.x-table table tfoot tr {
    background-color: var(--bg-color-tfoot);
    width: 100%;
}
.x-table table tfoot td {
}
.x-table .x-row-selected {
    background-color:var(--bg-color-tr-selected)  !important;
    font-size: 110%;
    font-weight: bold;
    color: #2A2A2A;
}

.x-table .x-row-edit {
    background-color: var(--bg-color-tr-edit) !important;
}
.x-table .x-row-edit input{
    width: 95%;
    height: 25px;
    border-style: dotted ;
    border-color: blue ;

}
.x-table .x-row-edit input[type=checkbox] {
    width: auto;
}
.x-gird
{
}
.x-grid-tool-bar 
{ 
    height: 60px; 
}
.x-grid-tool-bar >*
{
    margin: 0px 8px 0px 8px !important;
}

.x-paging-bar {
    font-weight: normal;
    overflow: hidden;
}
.x-paging-bar .x-label{

}
.x-paging-bar .x-label nobr{
    border: none !important;
}
.x-paging-bar .x-btn
{ 
    border-color: transparent;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    text-align: center;
    opacity: .25;
}
.x-paging-bar .x-first
{
    background-position: 0 -112px;
}
.x-paging-bar .x-first:hover
{
    opacity: 1
}
.x-paging-bar .x-previous
{
    background-position: 0 -48px;
}
.x-paging-bar .x-previous:hover
{
    opacity: 1
}
.x-paging-bar .x-next
{
    background-position: 0 -16px;;
}
.x-paging-bar .x-next:hover
{
    opacity: 1;
}
.x-paging-bar .x-last
{
    background-position:0 -80px
}
.x-paging-bar .x-last:hover
{
    opacity: 1;
}

.x-tree {
    /*font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;*/
    color: #666;
    white-space: nowrap;
    font-size: 100%;
}

.x-tree .x-header {
    /*background-color: beige;*/
    text-align: left;
    font-weight: bold;
}

.x-tree img {
    border: 0px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: 0;
    width: 20px;
    height: 20px;
}

.x-tree a {
    color: inherit;
    text-decoration: none;
}

.x-tree .x-treenode {
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    padding: 0px 2px 0px 2px;
    text-align: left;
    font-size: 100%;
}
.x-tree .x-treenode-level-0
{
    background-color: var(--bg-color-tree-level-0);
    border-bottom: solid 0px var(--border-color-tree-level-0);
    color: var(--font-color-tree-level-0);
}
.x-tree .x-treenode-level-1
{
    background-color: var(--bg-color-tree-level-1);
    border-bottom: solid 1px var(--border-color-tree-level-1);
    color: var(--font-color-tree-level-1);
}
.x-tree .x-treenode-level-2
{
    background-color:var(--bg-color-tree-level-2);
    border-bottom: solid 1px var(--border-color-tree-level-2);
    color: var(--font-color-tree-level-2);
}
.x-tree .x-treenode-level-3
{
    background-color: var(--bg-color-tree-level-3);
    border-bottom: solid 1px var(--border-color-tree-level-3);
    color: var(--font-color-tree-level-3);
}
.x-tree .x-treenode-level-4
{
    background-color: var(--bg-color-tree-level-4);
    border-bottom: solid 1px var(--border-color-tree-level-4);
    color: var(--font-color-tree-level-4);
}
.x-tree .x-treenode-level-5
{
    background-color: var(--bg-color-tree-level-5);
    border-bottom: solid 1px var(--border-color-tree-level-5);
    color: var(--font-color-tree-level-5);
}
.x-tree .x-selected
{
    color: mediumblue;
}

.x-tree .x-child {
    white-space: nowrap;
}

.x-tree a.selected {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
}

.x-tree a.x-treenode:hover, .x-tree a.selected:hover {
    color: #333;
    text-decoration: none;
}

.x-tree a.selected {
    background-color: var(--bg-color-tree-node-selected);
}

/*
*/
.x-fieldset{
    line-height: normal;
}

.x-simulator
{
    border: #000 1px solid;
    background-color:white !important;
    float: left;
    width: 355px;
    height: 738px;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    overflow: hidden;
    /*margin:10px auto 10px auto !important;*/
    box-shadow: 5px 5px 5px 0px rgba(3, 3, 3, 0.79);
}

.x-simulator .x-phone-header{
    height: 44px;
    background: #fff !important;
    position: relative;
    border-bottom: silver 1px solid;
}

.x-simulator .x-phone-header:before{

    content: "";
    position: absolute;
    top: 15px;
    left: 112px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;

}
.x-simulator .x-phone-header:after
{
    content: "";
    position: absolute;
    top: 15px;
    left: 128px;
    height: 8px;
    width: 80px;
    background: #ddd;
    border-radius: 8px;
}
.x-simulator .x-phone-body
{
    bottom: 46px !important;
}


.x-simulator .x-phone-footer{
    height: 45px;
    width: 100%;
    left: 0px;
    bottom: 0px;
    position: absolute;
    border-top: silver 1px solid;
}
.x-simulator .x-phone-footer:before
{
    content: "home";
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 60px;
    margin: 10px auto 10px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    position:absolute;
    left: 0px;
    right: 0px;
}
.x-simulator .x-app-header
{
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #fff;
}
.x-simulator .x-app-header:before
{
    content: '✕';
    float: left;
}
.x-simulator .x-app-header:after
{
    content: '●●●';
    font-size: 1%;
    float: right;
}
.x-simulator .x-app-body
{
    border: none;
    background-color: #fff !important;
    min-height: calc(100% - 46px)!important;
}

.x-separator-container {
    position: relative !important;
    border-spacing: 0px !important;
    height: 100%;
    width: 100%;
}

.x-separator-container tbody tr {
    position: relative !important;
    /*width: 100% ;*/
    /*height: 100% ;*/
    border: 0px;
    border-spacing: 0px !important;
}

.x-separator-container tbody td {
    border: 0px;
    border-spacing: 0px !important;
    /*height: 100%;*/
    overflow: hidden;
}

.x-separator-item {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;

}

.x-tool-bar {
    overflow: hidden;
}



.x-number-index {

}

.x-number-index .x-number {
    vertical-align: middle;
    text-align: center;
}

.x-number-index .x-number:hover {
    cursor: pointer;
    font-weight: bold;
}

.x-number-index .x-itemselected {
   font-weight: bold;
   font-size: 120%;
}

.x-message-box{

}
.x-message-box .x-text{
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none !important;
}
.x-message-box-line
{
    border-top: 1px solid darkgray;
}

.x-waiting-box
{}

.x-waiting-box .x-text
{
    border: none !important;
    text-align: center !important;
    font-size: 130%;
    font-family: "Arial";
    background-color: var(--bg-color-waiting);
    color: #eff3f6;
}
.x-loading-box
{}

.x-loading-box .x-text
{
    border: none !important;
    text-align: center !important;
    font-size: 120%;
    font-family: "Arial";
    background-color: var(--bg-color-loading);
    color: #eff3f6;
}

.x-popup-bar
{
    overflow: hidden !important;
    display: flex;
}
.x-popup-box
{ 
    border-radius: 4px; 
    z-index: 99999;
    margin: 0 auto !important;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row; 
    background-color: var(--bg-color-popup-bar) ;
}
.x-popup-box .x-text
{
    font-size: 120%;
    text-align: center;

}

.x-loading-bar  {

}
.x-loading-bar  .x-fullwidth{
    width:100%;
    height:1px;
    margin:2px 0;
    background:#1302fc;
    position:absolute;
    box-shadow:0px -13px 10px 1px rgb(8 27 255);

}
.x-loading-bar .x-normal
{
    -moz-animation:fullexpand 10s ease-out;
    -webkit-animation:fullexpand 10s ease-out;
}
.x-loading-bar .x-slow
{
    -moz-animation:fullexpand 15s ease-out;
    -webkit-animation:fullexpand 15s ease-out;
}

.x-loading-bar .x-fast
{
    -moz-animation:fullexpand 2s ease-out;
    -webkit-animation:fullexpand 2s ease-out;
}

.x-link{
   color: inherit;
}
.x-link:hover{
    color:  #0000ffb8; 
}
.x-link span:hover{ 
    cursor: pointer ;
    color: #0000ffb8; 
}
.x-link a{
    color: inherit;
    cursor: pointer ;
}

.x-list, .x-list-view 
{
     display: inline;
     overflow: auto;
}
.x-list ol::-webkit-scrollbar-track { 
    
    background-color: rgb(153, 151, 151);  
}  
.x-list ol::-webkit-scrollbar { 
    width: 4px;
    border-radius: 1px; 
} 
.x-list ol::-webkit-scrollbar-thumb { 
 
    background-color: rgba(24, 18, 18, 0.65); 
    border-radius: 2px; 
}
.x-list .x-li-hover ,.x-list-view .x-li-hover
{ 
    overflow: auto;
}
.x-list .x-li-hover:hover ,.x-list-view .x-li-hover:hover
{
    scale: 1.1;
}
.x-menu-list{
    overflow: hidden;
}
.x-menu-list ol::-webkit-scrollbar-track { 
    
    background-color: rgb(153, 151, 151);  
}  
.x-menu-list ol::-webkit-scrollbar { 
    width: 4px;
    border-radius: 1px; 
} 
.x-menu-list ol::-webkit-scrollbar-thumb { 
 
    background-color: rgba(24, 18, 18, 0.65); 
    border-radius: 2px; 
}
.x-menu-list li .x-menu-item
{
    overflow: hidden;
}
.x-menu-list li .x-menu-items
{
    overflow: hidden;
}
.x-menu-list li .x-menu-items::after
{
    content: '》 ';
    float: right;
}
.x-menu-list .x-li-hover
{
    overflow: hidden;
}
.x-list ou,.x-list ol,.x-menu-list ou
{
    height: auto !important;
    width: 100%;
    margin-top:0px;
    overflow: auto;
}
.x-menu-list ol,.x-list-toolbar ou,.x-list-toolbar ol{
    height: auto !important;
    width: 100%;
    margin-top:0px;
}
.x-list li{
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    display: block;
    font-size: 100%;
    /* font-weight: bold; */
}

.x-menu-list .x-selected,.x-menu-list .x-li-hover:hover
{
    color: #0000ff;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 0px;
    -webkit-font-smoothing: antialiased;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(90deg, rgb(215, 254, 197) 0px,rgb(72, 213, 105)  100%);
    background-origin: padding-box;
    background-size: auto;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px 0px;
    cursor: pointer;

}
.x-menu-list-h{
    display: flex;
    white-space: nowrap;
    height: auto !important;
    width: 100%;
    margin-top:0px;
}
.x-menu-list-h li
{
    align-content:center; 
    display: inline-block;
    font-size: 100%;
}
.x-menu-list-h .x-li-hover
{
    overflow: auto hidden;
}
.x-menu-list-h .x-selected, .x-menu-list-h .x-li-hover:hover
{
    border-bottom-width:2px;
    border-bottom-color:rgb(72, 213, 105);
    border-bottom-style: solid;
    cursor: pointer;
}
.x-menu-list-h::-webkit-scrollbar-track ,.x-menu-list-h ol::-webkit-scrollbar-track { 
    
    background-color:rgba(24, 18, 18, 0.65); 
}  
.x-menu-list-h::-webkit-scrollbar,.x-menu-list-h ol::-webkit-scrollbar { 
    height: 0px;
    border-radius: 1px; 
} 
.x-menu-list-h::-webkit-scrollbar-thumb,.x-menu-list-h ol::-webkit-scrollbar-thumb { 
 
    background-color:  rgb(153, 151, 151);  
    border-radius: 2px; 
}
.x-list-toolbar li
{
    float: left;
    display: block;
    font-size: 100%;
}
.x-list-toolbar .x-li-hover
{
    overflow: hidden;
}
.x-list-toolbar .x-li-hover:hover
{
    background-color: rgb(64, 78, 103);
    color: #fff;
    cursor: pointer;
}

.x-t-header{
    color: var(--font-color-template-header);
    font-size: 150%;
    text-indent: 0.5cm;
    height: 30px;
    line-height: 30px;
    background-color: var(--bg-color-template-header) !important;
    /*text-decoration:underline;*/
}

.x-view-master {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.x-icon_circle{
    display: inline-block;
    border-radius: 50%;
}
.x-control-menu
{
    margin:0;
    background-color: var(--bg-color-menu) !important;
    color: var(--font-color-menu);
    line-height: 30px;
    text-align: center;

}
.x-control-menu ul{
    margin-block-start:0px;
    margin-block-end:0px;
}

.x-control-menu :hover
{
    margin:0;
    background-color: var(--bg-color-menu-hover) !important;
    color: var(--font-color-menu-hover);
}

.x-control-menu-sub
{
    margin:0;
    line-height: 30px;
    text-align: center;
    border-top: 1px solid rgba(128, 128, 128, 0.87);
    opacity: 0.9;
    background-color: var(--bg-color-menu) !important;
    color: var(--font-color-menu);

}

.x-control-menu-sub :hover
{
    margin:0;
    line-height: 30px;
    text-align: center;
    background-color: var(--bg-color-menu-hover) !important;
    color: var(--font-color-menu-hover);

}


/*
x-control-calendar
*/
.x-control-calendar  {
    display: table-cell;
    vertical-align: top;
    bottom: 8px; 
    min-width: 340px;
    min-height: 300px;
}
.x-control-calendar  .x-month {
    position: relative;
    background-color: #efefef;
    height: 10%;
    min-height: 32px;
    max-height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-bottom: 3px;
    line-height: 32px;
}
.x-control-calendar  .x-month .x-month-title {
    font-size: 14px;
    text-align: center;
}
.x-control-calendar  .x-month .x-arrow{
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    position: absolute;
    width: 28px;
    minHeight: 30px;
    line-height: 32px;
    text-align: center;
    top: 0px;
    color: #afafaf;
}
.x-control-calendar  .x-month .x-arrow-left {

    right:auto;
    left: 0px;
}
.x-control-calendar  .x-month .x-arrow-right {
    left: auto;
    right: 0px;
}
.x-control-calendar  .x-day-week
{
    margin: 0px;
    background-color: whitesmoke;
}

.x-control-calendar  .x-day-week li {
    list-style-type: none;
    display: inline-block;
    width: 13%;
    height: 10%;
    min-height: 24px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
}
.x-control-calendar  .x-day-week li:first-child {
    margin-left: 0;
}
.x-control-calendar  .x-days {
    /*height: 65%;*/
    position: absolute;
    top:60px;
    left: 0px;
    right: 0px;
    bottom: 25px; 
}
.x-control-calendar  .x-days:before, .x-control-calendar .x-days:after {
    content: "";
    display: table;
}

.x-control-calendar  .x-days li {
    margin: 0px 1px 1px 0px;
    list-style-type: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 13%;
    height: 16.5%;
    min-height: 24px;
    border-right: solid 1px rgba(154, 154, 154, 0.25);
    color: rgba(0, 0, 0, 0.9);
    float: left;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    position: relative;
}
.x-control-calendar .x-days .x-day-empty
{
    color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.x-control-calendar .x-days .x-day-empty:hover
{
    cursor: default;
}

.x-control-calendar  .x-days  .x-day-disabled {
    color: rgba(0, 0, 0, 0.6);
}
.x-control-calendar  .x-days  .x-day-disabled:hover {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, 0.3);
    cursor: default;
}

.x-control-calendar .x-days .x-day-last-in-row {

    border-right: none;
}
.x-control-calendar .x-days .x-day-in-range {
    color: #2a91ca;
    background-color: #ddf3fe;
    border-color: #ddf3fe;
}
.x-control-calendar .x-days .x-day-last-in-range {
    border-color: white;
}
.x-control-calendar .x-days .x-day-selected, .x-control-calendar .x-days li:hover {
    color: #ef1f1f;
    background-color: rgba(42, 145, 202, 0.3);;

}


.x-control-calendar :first-child .x-day-selected {
    border-color: #ddf3fe;
}

.x-control-calendar .x-date {
    position: absolute;
    bottom: 0px;
    min-height: 25px;
    line-height: 25px;
    height: 8%;
    width: 100%;
    text-align: center;
    color: #2a91ca;
    font-size: 115%;
}

.x-folder-hover  
{ 
    border-radius: 4px;
    overflow: auto;
}
.x-folder-hover:hover,.x-folder-selected
{
    scale: 1.1;
    box-shadow: 0px 0px 2px 1px grey;
    scale: 1.1;
}

/*
x-control-date-range
*/
.x-control-date-range
{}

.x-control-date-range .x-separator {
    display: table-cell;
    position: relative;
    width: 69px;
    top: 8px;
}
.x-control-date-rang .x-separator:before {
    content: "";
    position: absolute;
    height: 90%;
    border-left: 1px solid #e0e0e0;
    left: 34px;
}
/*

*/
.x-control-date-range .x-separator:after {
    content: "To";
    position: absolute;
    top: 80px;
    color: #2a91ca;
    background-color: white;
    height: 38px;
    width: 69px;
    text-align: center;
    font-size: 16px;
    line-height: 41px;
}
/*
无箭头 浮动框
*/
.x-rsd-dropdown-box
{
    position: absolute;
}
/*
有尖头浮动框（tip）
dom
*/
.x-rsd-tip
{
    position: fixed;
    z-index: 9999;
}
/*
有尖头浮动框（tip）
container
*/
.x-rsd-tip .x-box
{
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9999;
    font-size: 12px;
    color: #444444;
    background-color: white; 
    /*margin: 15px 0;
    padding: 18px 18px 38px;
    text-transform: uppercase;*/
    border: 1px solid #d6d6d6;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
   
}

.x-rsd-tip .x-tip-top {
    background-color:transparent;
}
.x-rsd-tip .x-tip-top:before, .x-rsd-tip .x-tip-top:after {
    position: absolute;
    content: "";
    border-style: solid;
}
.x-rsd-tip .x-tip-top:before {
    left: 18px; 
    border-width: 0 16px 16px;
    border-color: #d6d6d6 transparent;
}
.x-rsd-tip .x-tip-top:after {
    left: 14px; 
    border-width: 0px 16px 16px;
    border-color: white transparent;
}

.x-rsd-tip .x-tip-left { 
    background-color:transparent;
}
.x-rsd-tip .x-tip-left:before, .x-rsd-tip .x-tip-left:after {
    position: absolute;
    content: "";
    border-style: solid;
    left: 0;
}
.x-rsd-tip .x-tip-left:before {
    left: 0;
    top: 10px; 
    border-width: 16px 16px 16px 0px;
    border-color: transparent #d6d6d6 transparent transparent;
}
.x-rsd-tip .x-tip-left:after {
    left: 2px;
    top:12px;
    border-width: 16px  16px 16px 0px;
    border-color: transparent white transparent transparent;
}

.x-rsd-tip .x-tip-bottom { 
     background-color:transparent;
}
.x-rsd-tip .x-tip-bottom:before, .x-rsd-tip .x-tip-bottom:after {
    position: absolute;
    content: ""; 
    border-style: solid;
    bottom: 0;
}
.x-rsd-tip .x-tip-bottom:before {
    left: 12px;
    border-width: 16px 16px 0px;
    border-color: #d6d6d6 transparent;
}
.x-rsd-tip .x-tip-bottom:after {
    left: 10px;
    bottom:2px;
    border-width: 16px 16px 1px;
    border-color: white transparent;
}


.x-rsd-tip .x-tip-right { 
    top: 20px;
    right:2px !important;
     background-color:transparent;
}
.x-rsd-tip .x-tip-right:before, .x-rsd-tip .x-tip-right:after {
    position: absolute;
    content: ""; 
    border-style: solid;
    right: 0;
}
.x-rsd-tip .x-tip-right:before {
    right: 0;
    border-width: 16px 0px 16px 16px;
    border-color: transparent #d6d6d6; 
    top:10px;
}
.x-rsd-tip .x-tip-right:after {
    top: 12px;
    right:2px;
    border-width: 16px 0px 16px 16px;
    border-color: transparent white;
}

.x-component-edit-box
{
    border:1px blue dotted;
    box-shadow: 0px 4px 10px 0 #828282;
}
.x-component-select-box
{
    border:1px green dotted;
    box-shadow: 0px 4px 10px 0 #828282;
}
.x-bg-horizontal {
    background-color: #0ae;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.x-bg-vertical {
    background-color: #f90;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.x-bg-picnic {
    background-color:white;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
    -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

.x-bg-angled {
    background-color: #ac0;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
    to(transparent));
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
}

.x-bg-angled-135 {
    background-color: #c16;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
    to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
}

.x-bg-checkered {
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
    background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(45deg, transparent 75%, #555 75%),
    -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(45deg, transparent 75%, #555 75%),
    -o-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #555 75%),
    linear-gradient(-45deg, transparent 75%, #555 75%);
}
  
@font-face {
    font-family: iceicon2;
    src: url(//at.alicdn.com/t/font_107674_ps09fo1i2q8semi.eot);
    src: url(//at.alicdn.com/t/font_107674_ps09fo1i2q8semi.eot?#iefix) format("embedded-opentype"), url(//at.alicdn.com/t/font_107674_ps09fo1i2q8semi.woff) format("woff"), url(//at.alicdn.com/t/font_107674_ps09fo1i2q8semi.ttf) format("truetype"), url(//at.alicdn.com/t/font_107674_ps09fo1i2q8semi.svg#iceicon2) format("svg")
}